<!--
 * @description:
 * @author: huangpeng
 * @date: 2023年09月06日 10:45
 * @Copyright:  2022-2023
!-->
<template>
  <div class="main-anchor">
    <el-tabs v-model="activeTab" @tab-click="handleTabClick">
<!--      <el-tab-pane name="all">-->
<!--        <span slot="label">-->
<!--          <i class="el-icon-s-data"/>综合-->
<!--        </span>-->
<!--      </el-tab-pane>-->
      <el-tab-pane name="article">
        <span slot="label">
          <i class="el-icon-s-order"/>文章
        </span>
      </el-tab-pane>
      <el-tab-pane name="user">
        <span slot="label">
          <i class="el-icon-user-solid"/>用户
        </span>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script lang="ts">
import { Vue, Component } from "vue-property-decorator";

@Component({})
export default class searchType extends Vue {

  /** 当前tab */
  private activeTab: string = 'article';

  /** 点击tab */
  private handleTabClick(item: string) {
    this.$emit('handleSearchTypeTabClick', this.activeTab)
  }

}
</script>
<style scoped lang="scss">
.main-anchor {
  height: 40px;
  line-height: 40px;
  width: 100%;
  ::v-deep .el-tabs__item {
    //color: rgba(0, 0, 0);
  }
  ::v-deep .el-tabs__nav {
    text-align: center;
    width: 100%;
  }
  ::v-deep .el-tabs__item {
    font-size: 18px;
    font-weight: 600;
  }
  ::v-deep .el-tabs__active-bar {
    width: 0 !important;
  }
}
</style>
